<script>
import AppHeader from '../components/AppHeader.vue'
import AppFooter from '../components/AppFooter.vue'
import PoolCharts from "../components/PoolCharts.vue";
import BlocksTable from "../components/BlocksTable.vue";
import BlockDetail from "../components/BlockDetail.vue";
import MultiStepProgress from "../components/MultiStepProgress.vue";
import {ProfilingData} from "../components/profiling-data";
import Diagnose from "../components/diagnose/Diagnose.vue";

export default {
  components: {
    AppHeader,
    AppFooter,
    BlocksTable,
    PoolCharts,
    BlockDetail,
    MultiStepProgress,
    Diagnose
  },
  methods: {
    onAddingLogFile(e) {
      this.setLoading(true);
      this.startProgress(e.target.files);

      let promise = new ProfilingData().addLogFile(e.target.files[0],
          (currentPos) => this.updateProgress(e.target.files[0], currentPos));
      for (let i = 1; i < e.target.files.length; ++i) {
        promise = promise.then((result) => {
          return result.addLogFile(e.target.files[i],
              (currentPos) => this.updateProgress(e.target.files[i], currentPos));
        });
      }
      promise.then((result) => {
        console.log("Parse all files end, start to draw, pd: ", result);
        this.$refs.Dashboard.updateByPd(result);
        this.$refs.table.updateByPd(result);
        this.$refs.BlockInfo.setProfilingData(result);
        this.$refs.Diagnose.setErrors(result.getDiagErrors());
        this.$refs.progressModal.close();
        this.setLoading(false);
      })
    },
    setLoading(isLoading) {
      this.$refs.BlockInfo.block = undefined;
      this.$refs.Dashboard.setLoading(isLoading);
      this.$refs.table.setLoading(isLoading);
    },
    onSelectBlock(block) {
      this.selected = "BlockDetail";
      this.$nextTick(() => {
        this.$refs.BlockInfo.showBlock(block);
      });
    },
    switchTab(tab) {
      this.selectedTab.isActive = false;
      this.selectedTab = tab;
      this.selectedTab.isActive = true;
    },
    startProgress(files) {
      this.$refs.progressModal.clear();
      for (let file of files) {
        this.$refs.progressModal.addStep(file.name);
      }
      this.$refs.progressModal.show();
    },
    updateProgress(file, currentPos) {
      this.$refs.progressModal.setPercent(file.name, currentPos / file.size, "" + currentPos + "/" + file.size);
    }
  },
  data() {
    let tabs = [
      {isActive: true, name: "Dashboard", component: "PoolCharts"},
      {isActive: false, name: "BlockInfo", component: "BlockDetail"},
      {isActive: false, name: "Diagnose", component: "Diagnose"}
    ];
    return {
      tabs: tabs,
      selectedTab: tabs[0],
    }
  },
  computed: {
    currentRef() {
      return this.selectedTab.name;
    }
  }
}
</script>

<template>
  <AppHeader />

  <div class="container-fluid">
    <div class="row">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <div>
          <ul class="nav nav-pills" >
            <li class="nav-item" v-for="item in tabs">
              <a class="nav-link" :class="{ 'active': item.isActive }" href="#" v-on:click="switchTab(item)">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="input-group">
            <input type="file" multiple v-on:change="onAddingLogFile" class="form-control">
            <!-- <button class="btn btn-outline-secondary" type="button">Clear</button> -->
          </div>
        </div>
      </div>
    </div>

    <div v-show="tabs[0].isActive">
      <PoolCharts class="my-4 w-100" style="height:800px;" ref="Dashboard" />
    </div>
    <div v-show="tabs[1].isActive">
      <BlockDetail ref="BlockInfo" />
    </div>
    <div v-show="tabs[2].isActive">
      <Diagnose ref="Diagnose" />
    </div>

    <h2>Blocks Table</h2>
    <BlocksTable ref="table" :onRowClick="onSelectBlock" />
  </div>

  <MultiStepProgress ref="progressModal" />

  <AppFooter />
</template>
